﻿<template>
    <div class="person">
        <p>Welcome to your Vue.js app. Person</p>
        <hr>
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
    export default {
        // vue2 写法
        name: 'Person',
        beforeCreate(){
            console.log("beforeCreate")
        },
        // data(){
        //     return{
        //         name:"zhangsan",
        //         age:19,
        //         tel:"13811112222"
        //     }
        // },

        // methods:{
        //     changeName(){
        //         this.name = "zhang-san"
        //     },
        //     changeAge(){
        //         this.age += 1
        //     },
        //     showTel(){
        //         alert(this.tel)
        //     }
        // },

        
        /*
            vue3写法
            setup 函数中this是undefined vue3已经开始弱化this数据，原始写在data中。
        */
        setup(){
            // 数据
            let name = "zhangsan"   // name 不是响应式
            let age =19             // age 不是响应式
            let tel="13811112222"
            
            // 方法
            function changeName(){
                console.log(1)
                name = "zhang-san"
            }
            function changeAge(){
                console.log(2)
                age += 1
            }
            function showTel(){
                console.log(3)
                alert(tel)
            }
            /*
            setup函数，返回值将数据、方法交出去，模版中才能使用。
            返回值也可以是渲染函数
                return function(){
                    return "哈哈"
                }
                箭头函数（了解）
                return ()=> '哈哈'
                
            */
            // 将数据、方法交出去，模版中才能使用
            // return {a:name,b:age,c:tel}
            // return {name,age,tel}
            // return {name:name,age:age,tel:tel}
            return {name,age,tel,changeName,changeAge,showTel}

        }
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>